<template>
    <div>
        <div class="content">
            <scroller class="list-notice" scroll-direction="horizontal" style="flex-direction: row;flex-wrap: nowrap">
                <div class="notice-cell">
                    <div class="notice" @click="jump('/info/'+notice1.refInfoId)">
                        <image style="width: 560px;height: 180px;position: absolute;left: 0;right:0;" src="/resource/img/tzbg.jpg"></image>
                        <text class="label">公告</text>
                        <text class="title">{{notice1.noticeTypeLabel}}</text>
                        <text class="tz-text">{{notice1.title}}</text>
                    </div>
                </div>
                <div class="notice-cell">
                    <div class="notice" @click="jump('/info/'+notice2.refInfoId)">
                        <image style="width: 560px;height: 180px;position: absolute;left: 0;right:0;" src="/resource/img/tzbg-b.jpg"></image>
                        <text class="label">公告</text>
                        <text class="title">{{notice2.noticeTypeLabel}}</text>
                        <text class="tz-text">{{notice2.title}}</text>
                    </div>
                </div>
            </scroller>
            <text class="hot">成果展示</text>
            <list class="list-hot">
                <cell @click="jump('/chengguo/detail/'+item.id)" v-for="item in showResultList">
                    <div class="cg-cont">
                        <div class="images">
                            <image style="width: 690px;height: 472px;border-radius:6px" :src="item.thumb"></image>
                        </div>
                        <div class="bg"></div>
                        <div class="nr-cont">
                            <text class="text-title">{{item.title}}</text>
                            <text class="time-nr">{{item.createdAt}}</text>
                            <text class="user-name">{{item.personName}}</text>
                            <div class="operate">
                                <div class="cell">
                                    <div class="ico-cont">
                                        <image style="width: 32px;height: 28px;" src="/resource/img/share.png"></image>
                                    </div>
                                    <text class="text-o">{{item.shareNum}}</text>
    
                                </div>
                                <div class="cell">
                                    <div class="ico-cont">
                                        <image style="width: 32px;height: 28px;" src="/resource/img/msg.png"></image>
                                    </div>
                                    <text class="text-o">{{item.commentNum}}</text>
    
                                </div>
                                <div class="cell">
                                    <div class="ico-cont">
                                        <image style="width: 30px;height: 30px;" src="/resource/img/zan-s.png"></image>
                                    </div>
                                    <text class="text-o">{{item.zanNum}}</text>
                                </div>
    
                            </div>
                        </div>
                        <div class="tips">
                            <div class="disc"></div>
                            <text class="tips-text">{{item.showTypeLabel}}</text>
                        </div>
                    </div>
                </cell>
            </list>
            <AppHeader :title="headerTitle" :showBack="false" :showPhoto="false" showUser="false" showMsg="false"></AppHeader>
        </div>
    </div>
</template>

<style scoped>
    .content {
        margin-top: 110px;
        background-color: #f2f2f2;
        height: 1084px;
        padding-bottom: 100px;
    }
    
    .list-notice {
        flex-direction: row;
        padding-bottom: 30px;
        background-color: #ffffff;
        margin-bottom: 20px;
        flex-wrap: nowrap;
        height: 220px;
    }
    
    .notice {
        width: 560px;
        height: 180px;
        position: relative;
        margin-left: 30px
    }
    
    .label {
        position: absolute;
        left: 0;
        top: 16px;
        font-size: 20px;
        background-color: #ffffff;
        width: 60px;
        height: 32px;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        padding-top: 6px;
        color: #42b7ff;
        text-align: center;
    }
    
    .tips {
        position: absolute;
        left: 30px;
        top: 40px;
        background-color: #ffffff;
        width: 100px;
        height: 42px;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        padding-top: 6px;
        flex-direction: row;
    }
    
    .disc {
        width: 14px;
        height: 14px;
        background-color: #e12e2e;
        margin-left: 14px;
        margin-top: 10px;
        border-radius: 30px;
    }
    
    .tips-text {
        font-size: 24px;
        color: #333333;
        margin-left: 12px;
    }
    
    .title {
        font-size: 26px;
        margin-top: 15px;
        color: rgba(255, 255, 255, .9);
        text-align: center;
    }
    
    .time-nr {
        color: #aaaaaa;
        font-size: 24px;
        position: absolute;
        top: 340px;
        width: 750px;
        text-align: center;
    }
    
    .user-name {
        color: #dddddd;
        font-size: 28px;
        position: absolute;
        top: 280px;
        width: 750px;
        text-align: center;
    }
    
    .tz-text {
        height: 68px;
        margin-top: 28px;
        color: #ffffff;
        font-size: 26px;
        line-height: 36px;
        padding-left: 120px;
        padding-right: 120px;
    }
    
    .list-hot {}
    
    .hot {
        color: #fe7678;
        font-size: 30px;
        padding-top: 10px;
        padding-bottom: 20px;
        margin-left: 30px;
    }
    
    .cg-cont {
        background-color: #ffffff;
        padding-bottom: 20px;
        padding-top: 20px;
        padding-left: 30px;
        padding-right: 30px;
        flex-direction: row;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #dddddd;
        position: relative;
    }
    
    .nr-cont {
        width: 690px;
        position: absolute;
        height: 472px;
        top: 0;
        left: 0;
    }
    
    .text-title {
        font-size: 56px;
        width: 750px;
        color: #ffffff;
        position: absolute;
        top: 200px;
        text-align: center;
    }
    
    .images {
        border-width: 1px;
        border-color: #dddddd;
        border-style: solid;
        padding: 1px;
        border-radius: 6px;
    }
    
    .bg {
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.6);
        width: 690px;
        height: 472px;
        position: absolute;
        top: 20px;
        left: 30px;
    }
    
    .operate {
        flex-direction: row;
        justify-content: flex-start;
        position: absolute;
        top: 60px;
        right: 0;
        width: 360px;
    }
    
    .cell {
        flex: 1;
        flex-direction: row;
    }
    
    .ico-cont {
        width: 40px;
        height: 30px;
        align-items: flex-start;
        margin-right: 10px;
    }
    
    .text-o {
        font-size: 22px;
        color: #ffffff;
        flex: auto;
    }
</style>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'
    
    module.exports = {
        mixins: [mixins],
        components: {
            AppHeader
        },
        data() {
            return {
                headerTitle: "成果展示",
                navList: [],
                notice1: {},
                notice2: {},
                showResultList: []
            }
        },
        created() {
            let self = this;
            self.loadNotice();
            self.loadShowResultList();
        },
        methods: {
            loadShowResultList: function() {
                let self = this;
                var data = [];
                self.request({
                    type: "post",
                    url: "/findResultShowList",
                    data: {
                        "access_token": self.accessToken,
                        data: [{
                            "page": 1,
                            "pageSize": 5
                        }],
                    }
                }).then(res => {
                    self.showResultList = res.data.resultShows;
    
                });
            },
            loadNotice: function() {
                let self = this;
                self.request({
                    type: "post",
                    url: "/findNoticeListAll",
                    data: {
                        "access_token": self.accessToken
                    }
                }).then(res => {
                    if (res.status == 1) {
                        self.notice1 = res.data.dataList[0];
                        self.notice2 = res.data.dataList[1];
                    }
                });
            }
        }
    }
</script>
